<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按关注人数排序的贴吧</title>
    <style>
        .warning-row {
            background: oldlace;
        }

        .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row>
        <el-button type="primary" plain @click="goToChange">切换账号</el-button>
        <el-button type="primary" plain @click="goBack">返回</el-button>
    </el-row>


    <h2>所有贴吧，且按照现关注人数进行排序</h2>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" @selection-change="handleSelectionChange">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="barName" label="贴吧名称" align="center"></el-table-column>
        <el-table-column prop="nowNumber" label="现关注人数" align="center"></el-table-column>
        <el-table-column prop="ownerName" label="吧主名" align="center"></el-table-column>
        <el-table-column prop="created_at" align="center" label="创建时间"></el-table-column>
    </el-table>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>
<script>
    const query = location.search;
    new Vue({
        el: "#app",
        data() {
            return {
                dialogVisible:false,
                post:{
                    name:'',
                    id:'',
                    context:'',
                    likeNumber:'',
                    created_at:'',
                    barId:'',
                    barName:''
                },

                favor:{
                    id:'',
                    userName:'',
                    postId:'',
                    barName:''
                },
                comment:{
                    id:'',
                    userName:'',
                    likeNumber:'',
                    postId: '',
                    barName:'',
                    created_at:'',
                    context:''
                },

                Bar:[],
                totalCount: 1,
                pageSize: 5,
                currentPage: 1,
                tableData: [],
                tableData2:[],
                isFollowed: true,
                likedPostIds: [],
                updateDialogVisible:false,
                refuseDialogVisible:false,
                deleteDialogVisible:false

            }
        },
        mounted() {
            this.selectAllBars();
        },
        methods: {

            selectAllBars(){
                var _this=this
                axios({
                    method:"get",
                    url:"http://localhost:8080/BarSystem/User/selectHotBars"+query,
                    data:_this.tableData,

                }).then(resp => {
                    _this.tableData = [];
                    if (typeof resp.data === 'object' && resp.data!== null){
                        _this.tableData.push(resp.data);}else{
// 使用split方法将字符串按照"}"分割成数组
                        const responseDataArray = resp.data.split('}').map(item => {
                            if (item) return JSON.parse(item + '}');
                            else return null;
                        }).filter(item => item !== null);

// 根据数组长度判断是否为单个对象或多个对象组成的数组
                        if (responseDataArray.length === 1) {
                            // 如果数组长度为1，则直接解析JSON数据
                            _this.tableData = responseDataArray[0];
                        } else {
                            // 如果数组长度大于1，则将整理后的数据添加到tableData中
                            _this.tableData = _this.tableData.concat(responseDataArray);
                        }}
                })
                    .catch(error => {
                        console.error('Error fetching data', error);
                    });
            },


            goToChange() {
                window.location.href = 'login.jsp';
            },
            tableRowClassName({rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection);
            },
            handleSizeChange(val) {
                this.pageSize = val;
            },
            handleCurrentChange(val) {
                this.currentPage = val;

            },

            unFollow(row) {
                // 实现取消关注的逻辑
                // 可以通过axios向后端发送请求来处理
                console.log('取消关注', row);
            },
            addDisSupport(row) {
                const commentId =row.id ;

                //var _this = this;
                this.$confirm('是否继续给这个评论差评?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {  //确认之后执行axios请求
                    axios({
                        method: "post",
                        url: "http://localhost:8080/BarSystem/Comment/addDisSupport"+location.search+"&commentId="+commentId,
                    }).then(resp => {
                        if (resp.data === "success") {
                            //录入成功，关闭窗口,并且重新查询数据
                            this.selectOutOfMyComment();
                            this.$message({
                                message: '成功添加',
                                type: 'success'
                            });
                        }else {
                            this.selectOutOfMyComment();
                            this.$message({
                                message: '您之前已经添加过了',
                                type: 'error'
                            });
                        }
                    })

                }).catch(() => { //取消之后执行标签
                    this.$message({
                        type: 'info',
                        message: '已取消差评'
                    });
                });
            },
            supportComment(row) {
                const commentId =row.id ;

                //var _this = this;
                this.$confirm('是否继续给这个评论点赞?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {  //确认之后执行axios请求
                    axios({
                        method: "post",
                        url: "http://localhost:8080/BarSystem/Comment/supportComment"+location.search+"&commentId="+commentId,
                    }).then(resp => {
                        if (resp.data === "success") {
                            //录入成功，关闭窗口,并且重新查询数据
                            this.selectOutOfMyComment();
                            this.$message({
                                message: '成功点赞',
                                type: 'success'
                            });
                        }else {
                            this.selectOutOfMyComment();
                            this.$message({
                                message: '您之前已经点赞过了',
                                type: 'error'
                            });
                        }
                    })

                }).catch(() => { //取消之后执行标签
                    this.$message({
                        type: 'info',
                        message: '已取消点赞'
                    });
                });
            },
            OpenPage() {

                this.dialogVisible = true;
            },

            goBack(){
                window.location.href = 'User.html'+query;

            },






        }
    });
</script>
</body>
</html>